<script setup>
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { doGet, doPost } from '../http/httpRequest';
let userInfo = ref({})
let imageUrl = ref('')

// 图片对象
let uploadImageRef = ref({})
let uploadContractRef = ref({})

// 编辑
let route = useRoute()
let id = route.params.id

// 图片上传和文件上次的地址
let imageAction = ref('http://localhost:9099/api/user/image?id=' + id)
let fileAction = ref('http://localhost:9099/api/user/contract?id=' + id)

onMounted(() => {
    doGet('/api/user/' + id, {}).then(resp => {
        if (resp.data.code === 200) {
            userInfo.value = resp.data.data
        }
    })
})


function beforeImageUpload() {
    console.log("上传之前")
}

function handleImageSuccess() {
    console.log("上传成功")
}

function handlePreview() {

}

function handleRemove() {

}

function beforeRemove() {
    console.log("删除之前")
}

function handleExceed() {
    console.log("超出数量")
}

function onSubmit() {

    // 修改详细信息
    let formData = new FormData()
    debugger
    for (let field in userInfo.value) {
        if (userInfo.value[field]) {
            formData.append(field, userInfo.value[field])
        }
    }

    doPost('/api/user', formData).then(resp => {
        if (resp.data.code === 200) {
            this.$message.success("修改成功")
        }
    })


    // 上传图片
    uploadImageRef.value.submit()
    uploadContractRef.value.submit()
    console.log("提交成功")
}

</script>

<template>
    <el-form label-width="auto" :model="userInfo" style="max-width: 600px">
        <el-form-item label="昵称">
            <el-input v-model="userInfo.nickname" />
        </el-form-item>
        <el-form-item label="手机">
            <el-input v-model="userInfo.phone" />
        </el-form-item>
        <el-form-item label="性别">
            <el-input v-model="userInfo.sex" />
        </el-form-item>

        <!-- 上传头像 -->
        <el-form-item>
            <el-upload ref="uploadImageRef" class="avatar-uploader" :auto-upload="false" :action="imageAction"
                :show-file-list="true" :on-success="handleImageSuccess" :before-upload="beforeImageUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                </el-icon>
            </el-upload>
        </el-form-item>

        <!-- 上传文件 -->
        <el-form-item>
            <el-upload ref="uploadContractRef" :auto-upload="false" :action="fileAction" multiple
                :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="3"
                :on-exceed="handleExceed">
                <el-button type="primary">Click to upload</el-button>
                <template #tip>
                    <div class="el-upload__tip">
                        jpg/png files with a size less than 500KB.
                    </div>
                </template>
            </el-upload>
        </el-form-item>

        <el-form-item>
            <el-button type="success" @click="onSubmit">提交</el-button>
        </el-form-item>

    </el-form>
</template>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>